<!--
 * @version: 
 * @Author: yu
 * @Date: 2023-07-06 16:21:29
 * @LastEditors: Andy
 * @LastEditTime: 2023-07-13 15:00:37
-->
<template>
    <div>
        <div class="main">
            <div class="box">
                <h1>{{ route.name }}</h1>
                <el-form :model="user" ref="form1" label-width="100px" class="demo-ruleForm" :rules="rules">
                    <el-form-item label="用户名：" prop="username">
                        <el-input v-model="user.username" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item label="密码：" prop="password">
                        <el-input v-model="user.password" placeholder="请输入密码" show-password></el-input>
                    </el-form-item>
                </el-form>
                <el-button @click="_login(form1)" class="box1" type="primary">登录</el-button>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>

import { useRoute, useRouter } from 'vue-router'
import { reactive, computed, toRefs, onMounted, ref } from 'vue'
//type 自定义数据类型
import type { FormInstance, FormRules } from 'element-plus'
import { userLogin } from '@/request/api'
import { ElMessage } from "element-plus";
import { useStore } from 'vuex'


//定义一个ref的节点
let form1 = ref<FormInstance>()

const route = useRoute()
const router = useRouter()

let store = useStore()
// store.dispatch('userActions')
//封装一个登录参数得接口数据类型
interface RuleForm {
    username: string,
    password: string
}

//定义表单对象
let user = reactive<RuleForm>({
    username: '',
    password: ''
})



let rules = reactive<FormRules<RuleForm>>({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 2, max: 8, message: '字符长度是2到8', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 2, max: 8, message: '字符长度是2到8', trigger: 'blur' },
    ]

})

//登录事件
const _login = async (formEl: FormInstance | undefined) => {
    //登录判空
    // console.log(111);
    if (!formEl) return;
    await formEl.validate((val) => {
        // console.log(val);
        if (val) {
            // console.log(user);
            userLogin(user).then((res: any) => {
                // console.log(res);
                if (res.code === 200) {
                    //消息提示
                    ElMessage.success(res.msg)
                    //存储数据
                    store.dispatch('userActions', res.list)
                    //路由跳转
                    router.push('/index')
                } else {
                    //消息提示
                    ElMessage.error(res.msg)
                }

            })


        }
    })
}



onMounted(() => {
    // document.title = router.currentRoute.value.meta.title
    // console.log(document.title);
})


</script>
<style scoped>
.box1 {
    display: block;
    width: 280px;
    margin-left: 100px;
}

.main {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(to left, #323c5e, #503648);
    position: absolute;
    top: 0;
    left: 0;
}

.box {
    width: 380px;
    padding: 25px;
    line-height: 67px;
    /* margin: 10px; */
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 3%;
}

.box h1 {
    text-align: center;
}
</style>